<script setup>
import {inject, ref} from 'vue';
import ArrowLeft from '@/common/ArrowLeft.vue';
import FourContents from '@/common/FourContents.vue';

const isMiniProgram = inject('isMiniProgram');


const current = ref(0);


const items = [{
  image: 'https://resource.tuniaokj.com/images/xiongjie/x14.jpg'
},
  {
    image: 'https://resource.tuniaokj.com/images/xiongjie/xiong-3d-2.jpg',
  },
  {
    image: 'https://resource.tuniaokj.com/images/xiongjie/xiong-3d-new.jpg',
  },
  {
    image: 'https://resource.tuniaokj.com/images/xiongjie/xiong-3d-new1.png',
  }
];

const styles = {
  width: 12,
  height: 12,
  activeWidth: 24
};

const change = (e) => {
  current.value = e.detail.current;
};

const navTab = [{
  name: '今日最新',
  imgSrc: '../../static/index/AI.svg'
},
  {
    name: '今日灵感',
    imgSrc: '../../static/index/AI.svg'
  },
  {
    name: '今日推书',
    imgSrc: '../../static/index/AI.svg'
  },
  {
    name: '今日课程',
    imgSrc: '../../static/index/AI.svg'
  },
  {
    name: 'AI 互动',
    imgSrc: '../../static/index/AI.svg'
  },
  {
    name: '听书',
    imgSrc: '../../static/index/AI.svg'
  },
  {
    name: 'AI 电子书',
    imgSrc: '../../static/index/AI.svg'
  },
  {
    name: '学校教育',
    imgSrc: '../../static/index/AI.svg'
  },
  {
    name: '行业课程',
    imgSrc: '../../static/index/AI.svg'
  },
  {
    name: '顶级咨询',
    imgSrc: '../../static/index/AI.svg'
  }
];


const fourBoxes = [{
  img: 'https://fastly.picsum.photos/id/162/200/200.jpg?hmac=zGko1eZn0l_BsdOerR5_Ae53SRjRigypWkxLtzfKE6A',
  title: '这里写课程标题，如果标题长了换行展示...',
  introduce: '课程简介文本内容的开头',
  number: 5608,
  price: 99.9
}, {
  img: 'https://fastly.picsum.photos/id/162/200/200.jpg?hmac=zGko1eZn0l_BsdOerR5_Ae53SRjRigypWkxLtzfKE6A',
  title: '这里写课程标题，如果标题长了换行展示...',
  introduce: '课程简介文本内容的开头',
  number: 5608,
  price: 99.9
}, {
  img: 'https://fastly.picsum.photos/id/162/200/200.jpg?hmac=zGko1eZn0l_BsdOerR5_Ae53SRjRigypWkxLtzfKE6A',
  title: '这里写课程标题，如果标题长了换行展示...',
  introduce: '课程简介文本内容的开头',
  number: 5608,
  price: 99.9
}, {
  img: 'https://fastly.picsum.photos/id/162/200/200.jpg?hmac=zGko1eZn0l_BsdOerR5_Ae53SRjRigypWkxLtzfKE6A',
  title: '这里写课程标题，如果标题长了换行展示...',
  introduce: '课程简介文本内容的开头',
  number: 5608,
  price: 99.9
},]

const courseItem = [{
  title: "课程 1",
  titleColor: "#12868C",
  titleBgColor: "linear-gradient(181.59deg, #78D7DC 1.35%, rgba(255, 255, 255, 0) 98.65%)",
  contents: [{
    index: 1,
    imageSrc: 'https://resource.tuniaokj.com/images/xiongjie/xiong-3d-new.jpg',
    courseTitle: '课程标题 1-1',
    courseDescription: '这是第一个课程的介绍 1-1'
  },
    {
      index: 2,
      imageSrc: 'https://resource.tuniaokj.com/images/xiongjie/xiong-3d-new.jpg',
      courseTitle: '课程标题 1-2',
      courseDescription: '这是第一个课程的介绍 1-2'
    },
    {
      index: 3,
      imageSrc: 'https://resource.tuniaokj.com/images/xiongjie/xiong-3d-new.jpg',
      courseTitle: '课程标题 1-3',
      courseDescription: '这是第一个课程的介绍 1-3'
    },
    {
      index: 4,
      imageSrc: 'https://resource.tuniaokj.com/images/xiongjie/xiong-3d-new.jpg',
      courseTitle: '课程标题 1-4',
      courseDescription: '这是第一个课程的介绍 1-4'
    }]
},
  {
    title: "课程 2",
    titleColor: "#D2941C",
    titleBgColor: "linear-gradient(181.59deg, #FFD4A1 1.35%, rgba(255, 255, 255, 0) 98.65%)",
    contents: [{
      index: 1,
      imageSrc: 'https://resource.tuniaokj.com/images/xiongjie/xiong-3d-new.jpg',
      courseTitle: '课程标题 2-1',
      courseDescription: '这是第二个课程的介绍 2-1'
    },
      {
        index: 2,
        imageSrc: 'https://resource.tuniaokj.com/images/xiongjie/xiong-3d-new.jpg',
        courseTitle: '课程标题 2-2',
        courseDescription: '这是第二个课程的介绍 2-2'
      },
      {
        index: 3,
        imageSrc: 'https://resource.tuniaokj.com/images/xiongjie/xiong-3d-new.jpg',
        courseTitle: '课程标题 2-3',
        courseDescription: '这是第二个课程的介绍 2-3'
      },
      {
        index: 4,
        imageSrc: 'https://resource.tuniaokj.com/images/xiongjie/xiong-3d-new.jpg',
        courseTitle: '课程标题 2-4',
        courseDescription: '这是第二个课程的介绍 2-4'
      }]
  },
  {
    title: "课程 3",
    titleColor: "#D5307F",
    titleBgColor: "linear-gradient(181.59deg, #F09DC5 1.35%, rgba(255, 255, 255, 0) 98.65%)",
    contents: [{
      index: 1,
      imageSrc: 'https://resource.tuniaokj.com/images/xiongjie/xiong-3d-new.jpg',
      courseTitle: '课程标题 3-1',
      courseDescription: '这是第三个课程的介绍 3-1'
    },
      {
        index: 2,
        imageSrc: 'https://resource.tuniaokj.com/images/xiongjie/xiong-3d-new.jpg',
        courseTitle: '课程标题 3-2',
        courseDescription: '这是第三个课程的介绍 3-2'
      },
      {
        index: 3,
        imageSrc: 'https://resource.tuniaokj.com/images/xiongjie/xiong-3d-new.jpg',
        courseTitle: '课程标题 3-3',
        courseDescription: '这是第三个课程的介绍 3-3'
      },
      {
        index: 4,
        imageSrc: 'https://resource.tuniaokj.com/images/xiongjie/xiong-3d-new.jpg',
        courseTitle: '课程标题 3-4',
        courseDescription: '这是第三个课程的介绍 3-4'
      }]
  },
  {
    title: "课程 4",
    titleColor: "#34A24B",
    titleBgColor: "linear-gradient(181.59deg, #B0E5AF 1.35%, rgba(255, 255, 255, 0) 98.65%)",
    contents: [{
      index: 1,
      imageSrc: 'https://resource.tuniaokj.com/images/xiongjie/xiong-3d-new.jpg',
      courseTitle: '课程标题 4-1',
      courseDescription: '这是第四个课程的介绍 4-1'
    },
      {
        index: 2,
        imageSrc: 'https://resource.tuniaokj.com/images/xiongjie/xiong-3d-new.jpg',
        courseTitle: '课程标题 4-2',
        courseDescription: '这是第四个课程的介绍 4-2'
      },
      {
        index: 3,
        imageSrc: 'https://resource.tuniaokj.com/images/xiongjie/xiong-3d-new.jpg',
        courseTitle: '课程标题 4-3',
        courseDescription: '这是第四个课程的介绍 4-3'
      },
      {
        index: 4,
        imageSrc: 'https://resource.tuniaokj.com/images/xiongjie/xiong-3d-new.jpg',
        courseTitle: '课程标题 4-4',
        courseDescription: '这是第四个课程的介绍 4-4'
      }]
  },
  {
    title: "课程 5",
    titleColor: "#AE53F6",
    titleBgColor: "linear-gradient(181.59deg, #DBB2FB 1.35%, rgba(255, 255, 255, 0) 98.65%);",
    contents: [{
      index: 1,
      imageSrc: 'https://resource.tuniaokj.com/images/xiongjie/xiong-3d-new.jpg',
      courseTitle: '课程标题 5-1',
      courseDescription: '这是第四个课程的介绍 4-1'
    },
      {
        index: 2,
        imageSrc: 'https://resource.tuniaokj.com/images/xiongjie/xiong-3d-new.jpg',
        courseTitle: '课程标题 5-2',
        courseDescription: '这是第四个课程的介绍 4-2'
      },
      {
        index: 3,
        imageSrc: 'https://resource.tuniaokj.com/images/xiongjie/xiong-3d-new.jpg',
        courseTitle: '课程标题 5-3',
        courseDescription: '这是第四个课程的介绍 4-3'
      },
      {
        index: 4,
        imageSrc: 'https://resource.tuniaokj.com/images/xiongjie/xiong-3d-new.jpg',
        courseTitle: '课程标题 5-4',
        courseDescription: '这是第四个课程的介绍 4-4'
      }]
  }]

const navTabClick = (item, index) => {
  console.log('navTabClick', item, index);
  switch (index) {
    case 0:
      uni.navigateTo({
        url: '/pages/index/components/latest-today?index=' + index + '&title=' + item.name
      })
      break;
    case 5:
      uni.navigateTo({
        url: '/pages/index/components/book-today'
      })
      break;
    case 6:
      uni.navigateTo({
        url: '/pages/index/components/AI-book?index=' + index + '&title=' + item.name
      })
    case 7:
      uni.navigateTo({
        url: '/pages/index/components/AI-edu'
      })
    default:
      break;
  }
}

const handleArrowClick = () => {
  console.log('Arrow clicked!');
  // 执行其他相关操作，例如导航到另一个页面
};
const handleArrowClick1 = () => {
  console.log('Arrow clicked!');
  // 执行其他相关操作，例如导航到另一个页面
};

</script>


<template>
  <fui-nav-bar :custom="true" :isFixed="true" :isOccupy="true" background="#f8f8f8">
    <view class="nav-top">
      <view class="sreach-box">
        <div style="margin: 0 10rpx 0 35rpx">
          <fui-icon :size="40" name="search"></fui-icon>
        </div>
        <text>课程名称</text>
      </view>
      <view :style="{ marginRight: isMiniProgram ? '176rpx' : '0' }" class="lable-box">
        <div class="top-img">
          <image class="image-top" src="/static/index/top-lable.svg"/>
        </div>
        <text :style="{ fontSize: isMiniProgram ? '25rpx' : '28rpx' }">我的课程</text>
      </view>
    </view>
  </fui-nav-bar>
  <view class="index">
    <view class="swiper-box">
      <fui-swiper-dot :current="current" :items="items" :styles="styles">
        <swiper :duration="150" :indicator-dots="false" :interval="5000" autoplay circular
                class="fui-banner__box" next-margin="60rpx" previous-margin="60rpx" @change="change">
          <swiper-item v-for="(item, index) in items" :key="index">
            <view :class="{ 'fui-item__scale': current !== index }" class="fui-banner__cell">
              <image :src="item.image" class="s-image"/>
            </view>
          </swiper-item>
        </swiper>
      </fui-swiper-dot>
    </view>
    <view class="nav-tab-box">
      <view v-for="(item, index) in navTab" :key="index" class="item" @click="navTabClick(item, index)">
        <view class=" box">
          <image :src="item.imgSrc"/>
        </view>
        <text class="item-name">{{ item.name }}</text>
      </view>
    </view>
    <ArrowLeft arrowText="查看更多" iconName="arrowright" title="口碑好课" @arrow-click="handleArrowClick"/>
    <FourContents :fourBoxes="fourBoxes"/>
    <ArrowLeft arrowText="查看更多" iconName="arrowright" title="精品书籍" @arrow-click="handleArrowClick1"/>
    <FourContents :fourBoxes="fourBoxes"/>
    <ArrowLeft arrowText="查看更多" iconName="arrowright" title="榜单" @arrow-click="handleArrowClick1"/>
    <view class="scroll-course">
      <scroll-view class="scroll-view_H" scroll-left="0" scroll-x="true" @scroll="scroll">
        <view v-for="(item, index) in courseItem" :key="index" class="scroll-view-item_H">
          <view :style="{ background: item.titleBgColor }" class="item-title">
            <text :style="{ color: item.titleColor }">{{ item.title }}</text>
          </view>
          <view v-for="(item, index) in item.contents" :key="index" class="content-item-box">
            <view class="content-item">
              <view class="item-index">{{ item.index }}</view>
              <image class="item-img" src="https://resource.tuniaokj.com/images/xiongjie/xiong-3d-new.jpg"/>
              <view class="item-content">
                <view class="mark">{{ item.courseTitle }}</view>
                <view class="description">{{ item.courseDescription }}</view>
              </view>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
    <ArrowLeft arrowText="查看更多" iconName="arrowright" title="系列好课" @arrow-click="handleArrowClick1"/>
    <view v-for="(item, index) in fourBoxes" :key="index" class="list-box">
      <view class="list-item-box">
        <view class="list-item-img">
          <image :src="item.img"/>
        </view>
        <view class="list-item-content">
          <view class="list-mark">{{ item.title }}</view>
          <view class="list-description">{{ item.introduce }}</view>
          <view class="list-price-box">
            <view style="font-size: 24rpx;color: #999999">{{ item.number }} 人已学习</view>
            <view style="font-size: 24rpx;color: #F14545;">￥ {{ item.price }}</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.nav-top {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-around;


  .sreach-box {
    width: 418rpx;
    height: 84rpx;
    background: #FFFFFF;
    border-radius: 200rpx;
    display: flex;
    align-items: center;
    color: #999999;

    text {
      font-size: 28rpx;
    }
  }

  .lable-box {
    width: 212rpx;
    height: 84rpx;
    background: #FFFFFF;
    border-radius: 200rpx;
    display: flex;
    align-items: center;

    .top-img {
      margin: 0 10rpx 0 35rpx;

      .image-top {
        width: 36rpx;
        height: 36rpx;
      }
    }

    text {
      //font-size: 28rpx;
      color: #666666;
    }
  }
}

.index {
  padding: 15rpx;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  overflow: hidden;

  .swiper-box {
    width: 100%;

    .fui-banner__box {
      height: 280rpx;

      .fui-banner__cell {
        width: 100%;
        height: 280rpx;
        color: #FFFFFF;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 34rpx;
        font-weight: 600;
        border-radius: 24rpx;
        transition: transform .1s linear;
        overflow: hidden;

        .s-image {
          width: 100%;
          height: 100%;
        }
      }

      .fui-item__scale {
        transform: scale3d(.9, .9, 1);
      }
    }
  }

  .nav-tab-box {
    width: 100%;
    display: flex;
    flex-wrap: wrap;

    .item {
      width: 20%; // 每个item占据20%的宽度（即一行5个）
      height: 182rpx;
      box-sizing: border-box; // 包含内边距和边框在宽度计算中
      padding: 10px; // 内边距
      text-align: center; // 文本居中对齐
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;

      .box {
        width: 100%;
        height: 70%;
        background: white;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 32rpx;

        image {
          max-width: 80%;
          max-height: 80%;
        }
      }

      .item-name {
        width: 100%;
        height: 34rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 10rpx; // 调整名称与图像之间的间距
        font-size: 24rpx; // 字体大小，根据需要调整
        color: #666666;
      }
    }
  }

  .scroll-course {
    width: 100%;

    .scroll-view_H {
      display: flex;
      white-space: nowrap;
      width: 100%;
      padding-left: 10px;
      /* 左侧内边距 */

      .scroll-view-item_H {
        display: inline-block;
        width: 420rpx;
        height: 614rpx;
        border-radius: 40rpx;
        margin-right: 10px;
        background: #FFFFFF;
        /* 项目之间的右边距 */
        text-align: center;
        overflow: hidden;


        /* 居中显示 */
        .item-title {
          width: 100%;
          height: 130rpx;
          display: flex;
          align-items: center;
          justify-content: center;
        }

        .content-item-box {
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          flex-direction: column;

          .content-item {
            margin-top: 30px;
            width: 360rpx;
            height: 44rpx;
            display: flex;
            align-items: center;
            justify-content: space-around;

            .item-index {
              width: 32rpx;
              height: 44rpx;
            }

            .item-img {
              width: 72rpx;
              height: 96rpx;
              border-radius: 7.2rpx;
            }

            .item-content {
              width: 206rpx;
              height: 78rpx;
              background: #FFFFFF;
              display: flex;
              flex-direction: column;
              justify-content: space-around;
            }

            .mark {
              width: 216rpx;
              height: 40rpx;
              font-size: 28rpx;
              color: #424242;
              text-align: start;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }

            .description {
              width: 216rpx;
              height: 34rpx;
              font-size: 24rpx;
              color: #999999;
              text-align: start;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }

          }
        }
      }
    }
  }

  .list-box {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    .list-item-box {
      margin: 20rpx;
      width: 670rpx;
      height: 160rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .list-item-img {
        width: 216.44rpx;
        height: 160rpx;
        border-radius: 16rpx;
        overflow: hidden;

        image {
          width: 100%;
          height: 100%;
        }
      }

      .list-item-content {
        width: 433.34rpx;
        height: 100%;
        display: flex;
        justify-content: space-around;
        flex-direction: column;

        .list-mark {
          width: 100%;
          height: 40rpx;
          font-size: 28rpx;
          color: #424242;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        .list-description {
          width: 100%;
          height: 34rpx;
          font-size: 24rpx;
          color: #999999;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        .list-price-box {
          width: 100%;
          height: 42rpx;
          display: flex;
          align-items: center;
          justify-content: space-between
        }
      }
    }
  }
}
</style>